<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head th:replace="_fragments :: head(~{::title})">
    <title>Kuang_lib-关于我</title>
</head>
<body>

<!--导航-->
<nav th:replace="_fragments :: topbar(7)"></nav>


<!--顶部背景图片-->
<div class="m-bg-type_outer" style="width: 100%;height: 40%">
    <img src="../static/images/aboutbg.jpg" th:src="@{/images/cool.jpg}" alt="" class="ui m-bg image"
         style="width: 100%;height: 100%">
    <div class="m-bg-class_cover">
        <div class="ui container" style="position: relative ;bottom: -585px;">
            <div class="m-font-size-text-init-title m-margin-top" align="center">愿历经千帆，归来仍少年</div>
        </div>
    </div>
</div>

<!--个人资料描述-->
<div class="ui container m-opacity box-shadow-max">
    <div class="ui segment m-margin-" align="center">
        <div class="m-margin-top-large" align="center">
            <img class="ui circular image" align="center" th:src="@{/images/me2.jpg}"
                 style="width: 150px;height: 150px;">
        </div>
        <div class="m-margin-top-small" style="font-size: x-large;font-family: STSong" align="center">Kuang_lib</div>

        <div class="m-margin-top" align="center">
            <a href="#" class="ui tencent circular icon button"><i class="user icon"></i></a>
            <a href="#" class="ui wechat circular icon button"><i class="weixin icon"></i></a>
            <a href="#" class="ui qq circular icon button" data-content="316392836" data-position="bottom center"><i
                    class="qq icon"></i></a>
            <a href="https://github.com/Kuang-lib" target="_blank" class="ui github circular icon button"
               data-content="点击跳转GitHub" data-position="bottom center"><i class="github icon"></i></a>
            <a href="https://kuangyuanbin.cn/" target="_blank" class="ui csdn circular icon button"
               data-content="点击跳转CSDN" data-position="bottom center"><i class="copyright outline icon"></i></a>
            <a href="#" class="ui email circular icon button" data-content="1638907037@qq.com"
               data-position="bottom center"><i class="envelope  icon"></i></a>
        </div>

<!--        <div class="ui tencent-qr flowing popup transition hidden">-->
<!--            <img th:src="@{/images/qq.jpg}" alt="" class="ui rounded image"-->
<!--                 style="width: 110px">-->
<!--            <div align="center">公众号</div>-->
<!--        </div>-->
        <div class="ui wechat-qr flowing popup transition hidden">
            <img th:src="@{/images/wechat.jpg}" alt=""
                 class="ui rounded image" style="width: 110px">
            <div align="center">微信</div>
        </div>
        <div class="ui qq-qr flowing popup transition hidden">
            <img th:src="@{/images/qq.jpg}" alt="" class="ui rounded image"
                 style="width: 110px">
            <div align="center">QQ</div>
        </div>
        <hr class="m-margin-top-small" style="width: 30%">
        <br>
        <div>
            <p>95后</p>
            <p>爱编程、爱运动、爱游戏、爱动漫、爱人生...</p>
            <p>生活的道路一旦选定，就勇敢地走到底，决不回头。</p>
            <p>没有伞的孩子,就必须努力奔跑</p>
            <p>找不到坚持下去的理由</p>
            <p>那就找一个重新开始的理由</p>
            <p>生活本来就这么简单</p>
            <p>既然来到了人间</p>
            <p>便去经历，去拼搏，去感受，去爱</p>
            <p>不抱有一丝幻想，不放弃一点机会，不停止一日努力</p>
            <p>总有些人，有些事，会让你感觉到生命的温暖和满足，让你感慨生命的“不虚此行”</p>
            <p>届时，我会说</p>
            <p>我来过，我不后悔！</p>
        </div>
        <hr class="m-margin-top-large">
        <br>
        <h2 class="m-margin-tb-tiny" style="font-size: xx-large;font-weight: bold;color: #F08047;font-family: STSong">
            打赏本站</h2>
        <div class="ui orange basic label m-margin-tb-tiny">
            <p style="font-size: medium">每一次提笔的我们，就像街边的街头艺人，用笔唱着自己的歌谣。如果有一天你感动了，那么期待您请我们来一杯咖啡</p>
        </div>
        <div class="ui orange basic label">
            <div class="ui images" style="font-size: inherit !important;">
                <div class="image">
                    <img th:src="@{/images/alipay.png}" alt=""
                         class="ui rounded bordered image" style="width: 180px">
                    <div>支付宝</div>
                </div>
                <div class="image">
                    <img th:src="@{/images/wechatpay.png}" alt=""
                         class="ui rounded bordered image" style="width: 180px">
                    <div>微信</div>
                </div>
            </div>
        </div>
        <!--<div class="hiddenDiv"></div>-->
    </div>
</div>

<br>
<br>

<!--底部栏-->
<footer th:replace="_fragments :: footer"></footer>


<script src="https://cdn.jsdelivr.net/npm/jquery@3.2/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/semantic-ui/2.2.4/semantic.min.js"></script>

<script th:replace="_fragments :: scriptTimer"></script>
<script>

    $('.menu.toggle').click(function () {
        $('.m-item').toggleClass('m-mobile-hide');
    });

    // 显示公众号
    $('.tencent').popup({
        popup: $('.tencent-qr'),
        position: 'bottom center'
    });

    // 显示微信
    $('.wechat').popup({
        popup: $('.wechat-qr'),
        position: 'bottom center'
    });

    // 显示QQ
    $('.qq').popup({
        popup: $('.qq-qr'),
        position: 'bottom center'
    });

    // 显示邮箱
    $('.email').popup();

    // 显示CSDN
    $('.csdn').popup();

    // 显示github
    $('.github').popup();

</script>
</body>
</html>